﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学习网站</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>

<!--header-->
<header class='header header_animate_init'>
    <div class="header__logo">H5实战页面</div>
    <nav class='header__nav'>
        <a href="javascript:;" class="header__nav-item header__nav-item_status_active">实战课程</a>
        <a href="javascript:;" class="header__nav-item">商业案例</a>
        <a href="javascript:;" class="header__nav-item">课程体系</a>
        <a href="javascript:;" class="header__nav-item">集成环境</a>
        <a href="javascript:;" class="header__nav-item">云端学习</a>
        <a href="javascript:;" class="header__nav-item">即可学习</a>
        <div class="header__nav-tip"></div>
    </nav>
</header>

<!--第一屏-->
<section class="screen-1">
    <h2 class='screen-1__title screen-1__title_animate_init'>实战课程重磅上线</h2>
    <p class="screen-1__desc screen-1__desc_animate_init">一键云学习，还在等待什么？</p>
</section>

<!--第二屏-->
<section class="screen-2">
    <h2 class="screen-2__title">每门课都是真实商业案例</h2>
    <div class="screen-2__mark"></div>
    <p class="screen-2__desc">真实案例，真实场景，在实战中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有的开发过程一一为你呈现</p>
    <div class="screen-2__img-people">
        <img src="img/sc2-1.png" alt="peopleImage">
    </div>
    <div class='screen-2__img-rocket'>
        <img src="img/sc2-2.png" alt="rocket">
    </div>
</section>

<!--第三屏-->
<section class="screen-3">
    <div class="screen-3__warp">

        <div class="screen-3__img"></div>

        <div class="screen-3__content">
            <h class="screen-3__content__title">强大的语言课程体系支持</h>

            <div class="screen-3__content__mark"></div>

            <p class="screen-3__content__desc">学习环境与课程轻松对接、安装、调试、写入、部署、运行，一站式解决<br>,让你体验开发全流程</p>

            <div class="screen-3__content__icon">
                <div class='screen-3__content__icon-1'></div>
                <div class='screen-3__content__icon-2'></div>
                <div class='screen-3__content__icon-3'></div>
                <div class='screen-3__content__icon-4'></div>
                <div class='screen-3__content__icon-5'></div>
            </div>

        </div>
    </div>
</section>

<!--第四屏-->
<section class="screen-4">
    <h2 class="screen-4__title">省去本地复杂的环境搭建</h2>
    <div class="screen-4__mark"></div>
    <p class="screen-4__desc">你可以告别在虚拟机中调试开发</p>

    <div class='screen-4__example'>

        <div class="screen-4__example-1">
            <img src="img/sc4-1.png" alt="" class="screen-4__example__img">
            <p class="screen-4__example__desc">实战课程集成开发环境</p>
        </div>

        <div class="screen-4__example-2">
            <img src="img/sc4-2.png" alt="" class="screen-4__example__img">
            <p class="screen-4__example__desc">内置终端命令行</p>
        </div>

        <div class="screen-4__example-3">
            <img src="img/sc4-3.png" alt="" class="screen-4__example__img">
            <p class="screen-4__example__desc">编译你的应用程序</p>
        </div>

        <div class="screen-4__example-4">
            <img src="img/sc4-4.png" alt="" class="screen-4__example__img">
            <p class="screen-4__example__desc">通过云端服务输出结果</p>
        </div>

    </div>
</section>

<!--第五屏-->
<section class="screen-5">
    <div class="screen-5__img">
        <img src="img/sc5-1.png" alt="">
    </div>
    <h2 class="screen-5__title">云端学习可以这样简单</h2>
    <div class="screen-5__mark"></div>
    <p class="screen-5__desc">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样</p>

</section>

<!--第六屏-->
<section class="screen-6">
    <a href="#" class="screen-6__button">继续了解学习体验</a>
</section>

<!--footer-->
<footer>
    <p class="footer__link">
        <a href="#">网站首页</a>
        <a href="#">人才招聘</a>
        <a href="#">联系我们</a>
        <a href="#">高校联盟</a>
        <a href="#">关于我们</a>
        <a href="#">讲师招聘</a>
        <a href="#">意见反馈</a>
        <a href="#">人才链接</a>
    </p>
    <p class="footer__copyright">Copyright &copy; 2015 imooc.com All Right Reserved | 京ICP备 13046642号 2</p>
</footer>

<!--侧边栏-->
<div class="outline outline_animate_init">
    <a href="javascript:;" class="outline__item outline__item_status_active">实战课程</a>
    <a href="javascript:;" class="outline__item">商业案例</a>
    <a href="javascript:;" class="outline__item">课程体系</a>
    <a href="javascript:;" class="outline__item">集成环境</a>
    <a href="javascript:;" class="outline__item">云端学习</a>
</div>

<!--js引包-->
<script src='js/index.js'></script>
</body>
</html>